<template>
  <div class="container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="商品信息" name="first">
        <div class="app-row m-20-t">
          <span class="title bold width-120">门店名称:</span>
          <el-input v-model="name_value" class="flex-1" />
        </div>
        <div class="app-row m-30-t">
          <span class="title bold width-100">店铺封面:</span>
          <el-upload
            class="upload-demo"
            :action="save_file_url"
            :on-preview="open_preview"
            :on-remove="handle_remove"
            :file-list="file_list"
            :on-success="get_img_id"
            list-type="picture-card"
            multiple
            :limit="1"
          >
            <i class="el-icon-plus" />
            <!-- <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> -->
          </el-upload>
        </div>
        <div class="app-row m-30-t">
          <span class="title bold width-100">店铺类型:</span>
          <el-select v-model="shop_category_value" class="flex-1" placeholder="请选择" @change="choose_shop_category">
            <el-option
              v-for="item in shop_category_list"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
        </div>
        <div class="app-row m-20-t">
          <span class="title bold width-140 ">是否是中心店:</span>
          <el-radio v-model="is_vip_radio" :label="0">否</el-radio>
          <el-radio v-model="is_vip_radio" :label="1">是</el-radio>
        </div>
        <div class="app-row m-20-t">
          <span class="title bold width-120">门店地址:</span>
          <el-input v-model="address_value" class="flex-1" />
        </div>

        <div class="app-row m-20-t">
          <span class="title bold width-120">门店电话:</span>
          <el-input v-model="phone_value" class="flex-1" />
        </div>
        <div class="app-row m-20-t">
          <span class="title bold width-120">营业时间:</span>
          <el-input v-model="opening_hours_value" class="flex-1" />
        </div>
        <div class="app-row m-20-t">
          <span class="title bold width-120">人均消费:</span>
          <el-input v-model="average_value" class="flex-1" />
        </div>

        <div class="app-row m-30-t">
          <span class="title bold width-100">分销员:</span>
          <el-select v-model="recommend_value_grade_1" class="flex-1" placeholder="请选择分销员" @change="choose_expert_grade_1">
            <el-option
              v-for="item in experts_list_grade_1"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
        </div>
        <div class="app-row m-30-t">
          <span class="title bold width-100">门店店长:</span>
          <el-select v-model="recommend_value_grade_11" class="flex-1" placeholder="请选择门店店长" @change="choose_expert_grade_11">
            <el-option
              v-for="item in experts_list_grade_11"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
        </div>
        <div class="app-row m-30-t">
          <span class="title bold width-100">商圈:</span>
          <el-select v-model="biz_value" class="flex-1" placeholder="请选择" @change="choose_biz">
            <el-option
              v-for="item in biz_list"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            />
          </el-select>
        </div>

      </el-tab-pane>
      <el-tab-pane label="描述" name="second">
        <div class="app-row m-30-t">
          <span class="title bold align-right width-150 ">店铺详情文字:</span>
          <el-input v-model="text_detail" type="textarea" class="m-50-l flex-1" :rows="4" placeholder="请输入内容" />
        </div>
        <div class="app-row m-30-t">
          <span class="title bold align-right width-150">店铺详情图片:</span>
          <el-upload
            class="upload-demo"
            :action="save_file_url_detail"
            :on-preview="open_preview"
            :on-remove="handle_remove_detail"
            :file-list="file_list_detail"
            :on-success="get_img_id_detail"
            list-type="picture-card"
            name="imgFile"
            multiple
          >
            <i class="el-icon-plus" />
          </el-upload>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="app-row j-c-c m-100-t">
      <el-button type="success" @click="edit_button">确认修改</el-button>
    </div>
    <el-dialog
      :visible.sync="if_open_preview_dialog"
      width="30%"
    >
      <img width="100%" :src="target_image_preview_url" alt="">
    </el-dialog>
  </div>
</template>

<script>
import biz_base_request from '@/api/biz_base_request'
import experts_request from '@/api/experts_request'
import host_one from '@/api/host/host'
import shop_category_request from '@/api/shop_category_request'
import shop_request from '@/api/shop_request'
export default {
  name: 'ShopListEdit',
  data() {
    return {
      address_value: '',
      phone_value: '',
      name_value: '',
      opening_hours_value: '',
      average_value: '',
      img_url: '',
      target_image_preview_url: [],
      activeName: 'first',
      file_list: [],
      file_list_detail: [],
      shop_manager_value: '',
      save_file_url: '',
      save_file_url_detail: '',
      biz_id: '',
      biz_list: [],
      biz_value: '',
      shop_category_list: [],
      shop_category_id: 0,
      shop_category_value: '',
      if_open_preview_dialog: false,
      img_id_list_detail: [],
      text_detail: '',
      is_vip_radio: 0,
      recommend_value_grade_1: '',
      recommend_value_grade_11: '',
      expert_id_grade_1: '',
      expert_id_grade_11: '',
      experts_list_grade_1: [],
      experts_list_grade_11: []
    }
  },
  created() {
    this.save_file_url = host_one + '/savefile'
    this.get_detail(this.$route.query.id)
    this.get_experts_list_grade_1()
    this.get_experts_list_grade_11()
    this.get_shop_category_list()
    this.get_biz_base_list()
    this.save_file_url_detail = host_one + '/uploadfile?dir=shop'
  },
  mounted() {

  },
  methods: {
    choose_shop_category(e) {
      this.shop_category_id = e
    },
    choose_expert_grade_1(e) {
      this.expert_id_grade_1 = e
    },
    choose_expert_grade_11(e) {
      this.expert_id_grade_11 = e
    },
    choose_biz(e) {
      this.biz_id = e
    },
    // 添加商品详情图片
    handle_remove_detail(file, file_list_detail) {
      this.img_id_list_detail = file_list_detail
    },
    get_img_id_detail(res, file, file_list_detail) {
      this.img_id_list_detail = file_list_detail
    },
    get_detail_photo_id_list() {
      const detail_photo_id_list = []
      for (const i of this.img_id_list_detail) {
        detail_photo_id_list.push(i.response.data.id)
      }
      return detail_photo_id_list
    },
    check_necessary_value() {
      if (this.name_value == '') {
        this.$message.error('请输入门店名称')
        return
      }
      if (this.target_img_url == '') {
        this.$message.error('请上传至少一张图片')
        return
      }
      return true
    },
    edit_button() {
      const if_necessary_value = this.check_necessary_value()
      if (!if_necessary_value) {
        return
      }
      const params = {
        // seller_name: "tianhe01",
        // password: "tianhe01",
        // mobile: "13712345678",
        // province: "0",
        // city: "0",
        // area: "0",
        phone: this.phone_value,
        address: this.address_value,
        id: this.$route.query.id,
        true_name: this.name_value,
        logo: this.target_img_url,
        eid: this.expert_id_grade_1,
        shop_master: this.expert_id_grade_11,
        biz_id: this.biz_id,
        category: this.shop_category_id,
        detail_photo: this.get_detail_photo_id_list(),
        ext_content: {
          opening_hours: this.opening_hours_value,
          average: this.average_value,
          description: this.text_detail
        },
        is_vip: this.is_vip_radio
      }
      shop_request.edit_shop(params, res => {
        this.$router.push('/shop/shop_list')
      })
    },
    open_preview(file) {
      this.if_open_preview_dialog = true
      this.target_image_preview_url = file.url
    },
    get_detail(id) {
      shop_request.detail_shop({ id }, res => {
        const result = res.data
        this.name_value = result.true_name
        this.target_img_url = result.logo
        this.init_file_list(result.logo)
        this.expert_id = result.expert_id
        this.recommend_value_grade_11 = result.shop_master
        this.biz_id = result.biz_id
        this.shop_category_id = result.category
        this.phone_value = result.phone,
        this.address_value = result.address,
        this.average_value = result.ext_content.average
        this.text_detail = result.ext_content.description
        this.is_vip_radio = result.is_vip
        this.opening_hours_value = result.ext_content.opening_hours
        this.get_recommend_value_grade_1(result.expert_id)
        this.get_biz_value(result.biz_id)
        this.get_shop_category_value(result.category)
        this.init_file_list_detail(result.detail_photo)
      })
    },
    init_file_list_detail(detail_photo_list) {
      const file_list_detail = []
      for (let i = 0; i < detail_photo_list.length; i++) {
        file_list_detail.push({ url: detail_photo_list[i].img, response: { data: { id: detail_photo_list[i].id }}})
      }
      this.file_list_detail = file_list_detail
      this.img_id_list_detail = file_list_detail
    },
    get_shop_category_list() {
      this.listLoading = true
      const params = {
        pageSize: 10,
        page: 1
        // name: this.keyword
      }
      shop_category_request.shop_category_list(params, res => {
        this.listLoading = false,
        this.shop_category_list = res.data
      })
    },
    get_shop_category_value(id) {
      if (id) {
        const params = {
          id
        }
        shop_category_request.detail_shop_category(params, res => {
          const result = res.data
          this.shop_category_value = result.name
        })
      }
    },

    get_recommend_value_grade_1(id) {
      if (id) {
        const params = {
          id
        }
        experts_request.detail_experts(params, res => {
          const result = res.data
          this.recommend_value_grade_1 = result.name
        })
      }
    },
    get_img_id(res, file, file_list) {
      // this.img_id_list = file_list
      this.target_img_url = file_list[0].response.data.url
    },
    handle_remove(file, file_list) {
      // this.target_img_url = file_list[0].response.data.url
      this.target_img_url = ''
    },
    init_file_list(logo) {
      const file_list = []
      file_list.push({ url: logo })
      this.file_list = file_list
    },
    get_experts_list_grade_1() {
      this.listLoading = true
      const params = {
        pageSize: 10,
        page: 1,
        grade: 1
        // name: this.keyword
      }
      experts_request.experts_list(params, res => {
        this.listLoading = false,
        this.experts_list_grade_1 = res.data
      })
    },
    get_experts_list_grade_11() {
      this.listLoading = true
      const params = {
        pageSize: 10,
        page: 1,
        grade: 11
        // name: this.keyword
      }
      experts_request.experts_list(params, res => {
        this.listLoading = false,
        this.experts_list_grade_11 = res.data
      })
    },
    get_biz_base_list() {
      this.listLoading = true
      const params = {
        pageSize: 10,
        page: 1
        // name: this.keyword
      }
      biz_base_request.biz_base_list(params, res => {
        this.listLoading = false,
        this.biz_list = res.data
      })
    },
    get_biz_value(id) {
      if (id) {
        const params = {
          id
        }
        biz_base_request.detail_biz_base(params, res => {
          const result = res.data
          this.biz_value = result.title
        })
      }
    },
    handleClick(tab, event) {

    }

  }
}
</script>

<style scoped>
@import "~@/styles/layout.scss";
</style>
